<template>
	<div class="home">

		<!--轮播图-->
		<mt-swipe :auto="0" :continuous="true" :speed="2000">
			<mt-swipe-item><img class="ig" src="../../images/wz.jpg" alt="1"></mt-swipe-item>
			<mt-swipe-item><img class="ig" src="../../images/wz2.jpg" alt="2"></mt-swipe-item>
			<mt-swipe-item><img class="ig" src="../../images/wz3.jpg" alt="3"></mt-swipe-item>
			<mt-swipe-item><img class="ig" src="../../images/wz4.gif" alt="4"></mt-swipe-item>
		</mt-swipe>

		<!--九宫格-->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/homeChild">
					<img src="../../images/wz4.gif"/>
					<div class="mui-media-body">新闻资讯</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/dt1.gif"/>
				<div class="mui-media-body">Email</div>
			</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/dt2.gif"/>
				<div class="mui-media-body">Chat</div>
			</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/dt3.gif"/>
				<div class="mui-media-body">location</div>
			</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/dt4.gif"/>
				<div class="mui-media-body">Search</div>
			</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/dt5.gif"/>
				<div class="mui-media-body">Phone</div>
			</a></li>

		</ul>

	</div>
</template>

<script>
    export default {
        data() {
            return {
                list: []
            }
        },
        //初始化完成调用轮播图方法
        // created() {
        //     this.LuoBoTu()
        // },
        methods: {
            //【发送ajax获取轮播图数据】
            // LuoBoTu() {
            //     this.$http.post("http://www.vue.com/PHP/homePHP.php",{},{emulateJSON:true}).then(result => {
            //         console.log(result)
            //     })
            // }
        }
    }
</script>

<style scoped>
	.mint-swipe {
		height: 180px;
	}

	.mint-swipe-item:nth-child(1) {
		background-color: orange;
	}

	.ig {
		width: 100%;
		height: 100%;
	}

	li img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
</style>